<template>
	<div>
		<!-- 查询框 -->
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
		  <el-form-item label="名称">
		    <el-input v-model="queryForm.name" placeholder="菜单名称"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="querySubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table
		  :data="tableData"
		  @selection-change="handleSelectionChange"
		  style="width: 90%">
		  <!-- 多选
		  <el-table-column
		  type="selection"
		  ></el-table-column>-->

		  <el-table-column
		  label="#" prop="id"
		  ></el-table-column>

		  <el-table-column
			prop="name"
			label="名称">
		  </el-table-column>
			<el-table-column
					prop="nameZh"
					label="编码">
			</el-table-column>
		  
		  <el-table-column label="创建时间" prop="created">
		  </el-table-column>
		  <!-- 分页 -->
		  <el-table-column label="操作">
			  <template slot-scope="scope">
				  <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
				  <el-button size="mini" type="primary" @click="openBindDialog(scope.row)">绑定菜单</el-button>
			  </template>
		  </el-table-column>

		</el-table>

		<el-pagination
		  :page-count="pageCount"
		  :current-page="queryForm.current"
		  @current-change="gotoPage"
		  layout="prev, pager, next">
		</el-pagination>

		<div>
			<!-- <el-button size="mini" type="danger" @click="batchDel()">批删</el-button> -->
			<el-button size="mini" @click="add">添加</el-button>
		</div>


		<!-- 对话框添加角色信息 -->
		<el-dialog
		  title="角色(添加/编辑)"
		  :visible.sync="dialogVisible"
		  width="40%"
		  :before-close="handleClose">
		  <el-form ref="form" :model="form" label-width="80px">
		    <el-form-item label="角色名称">
		      <el-input v-model="form.name" placeholder="请输入名称"></el-input>
		    </el-form-item>
			  <el-form-item label="角色编码">
				  <el-input v-model="form.nameZh" placeholder="请输入名称"></el-input>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 绑定菜单 -->
		<el-dialog
		  title="绑定菜单"
		  :visible.sync="bindDialogVisible"
		  width="40%"
		  :before-close="handleCloseBindDialog">
		  <div>{{roleName}}</div>
		  <el-tree
		    :data="treeData"
		    show-checkbox
		    default-expand-all
		    node-key="id"
		    ref="tree"
		    highlight-current
		    :props="defaultProps">
		  </el-tree>
		 
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="bindDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveBindMenu">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				//查询条件
				queryForm:{
					current:1,
					size:6
				},
				//列表数据
				tableData:[],
				//table选择数据Id数组
				selecteIds:[],
				//总页数
				pageCount:1,
				dialogVisible:false,
				form:{},
				bindDialogVisible:false,
				treeData:[],
				defaultProps:{
				  children: 'subMenu',
				  label: 'name'
				},
				roleName:null,
				roleId:null
			}
		},
		methods:{
			
		 /* getCheckedKeys() {
			console.log(this.$refs.tree.getCheckedKeys());
		  },
		  setCheckedKeys() {
			this.$refs.tree.setCheckedKeys([3,9]);
		  }, */
			handleClose(){
				this.dialogVisible = false;
			},
			handleCloseBindDialog(){
				this.bindDialogVisible = false;
			},
			openBindDialog(row){
				console.log(row);
				this.roleName = row.name;
				this.roleId = row.id;
				this.bindDialogVisible = true;
				//回显数据
				this.axios.get(this.$baseUrl+"/menu/getMenuIdsByRoleId",{params:{roleId:row.id}}).then(res=>{
					this.$refs.tree.setCheckedKeys(res.data.data);
				})

			},
			saveBindMenu(){
				let menuIdList = this.$refs.tree.getCheckedKeys();
				console.log(menuIdList);
				this.bindDialogVisible = false;
				//保存数据
				this.axios.post(this.$baseUrl+"/role/bindMenu",{id:this.roleId,menuIds:menuIdList}).then(res=>{
					if(res.data.result){
						this.$message({
							type:"success",
							message:"绑定菜单成功"
						});
					}else{
						this.$message({
							type:"error",
							message:"绑定菜单失败"
						});
					}

				})
			},
			save(){
				console.log(this.form);
				this.form.roleIdList = null;
				//ajax提交班级信息
				this.axios.post(this.$baseUrl+"role/save",this.form).then(res=>{
					if(res.data.result){
						//关闭对话框
						this.form={};
						this.dialogVisible = false;
						this.$message({
							message:"添加成功",
							type:"success"
						});
						this.querySubmit();
					}else {
						this.$message(res.data.message);
					}
				})
			},
			add(){
				this.form = {};
				this.dialogVisible = true;
			},
			edit(row){
				this.dialogVisible = true;
				this.form = row;
			},
			bindMenu(row){

			},
			handleSelectionChange(rows){
				console.log(rows);
				// let ids = rows.map(function(row){return row.id});
				let ids = rows.map(row=>{return row.id});
				this.selecteIds = ids;
				console.log("selecteIds:"+this.selecteIds);
			},
			gotoPage(current){
				this.queryForm.current = current;
				this.list();
			},
			querySubmit(){
				//发送ajax请求，根据queryForm查询数据
				console.log(this.queryForm);
				this.queryForm.current=1;
				this.list();

			},
			//列表页数据
			list(){
				//发送ajax请求，根据queryForm查询数据
				this.axios.get(this.$baseUrl+"role/list",{params:this.queryForm}).then(res=>{
					//axios封装了结果，res.data是我们接口的数据
					console.log(res.data);
					this.tableData = res.data.data.records;
					//设置分页数量、当前页
					this.pageCount = res.data.data.pages;
					this.queryForm.current = res.data.data.current;
				})
			}
		},
		created(){
			this.list();
			this.axios.get(this.$baseUrl+"menu/getAllTreeMenus",{params:{username:'admin'}}).then(res=>{
				this.treeData = res.data.data;
			})
		}
	}
</script>

<style scoped>

</style>
